<template>

    <el-container style="min-height: 100vh">
<!--      侧边栏-->
      <el-aside width="sideWidth + 'px'" style="background-color: rgb(238, 241, 246); min-height: 100vh">
        <Aside :isCollapse="isCollapse" :logoTextShow="logoTextShow"/>
      </el-aside>

      <el-container>
<!--        头部-->
        <el-header style="border-bottom: 1px solid #ccc">
          <Header :collapseBtnClass="collapseBtnClass" :collapse="collapse" :people="people.peopleids"/>
        </el-header>
<!--        主体-->
        <el-main>
<!--          表示当前页面的子路由会在router-view内显示-->
          <router-view @refresUser="getUser"/>
        </el-main>
      </el-container>
    </el-container>

</template>

<script>

import Aside from "@/components/Aside";
import Header from "@/components/Header";

import request from "@/utils/request";

export default {
  name: 'HomeView',
  components: {Header, Aside},
  data() {
    // const item = {
    //   id: '92211022MA0YUYY86R',
    //   name: '铁岭县家和美生鲜超市',
    //   id2: 'SC12421012201760',
    //   kind: '普通食品经营（销售）'
    // };
    return {
      // tableData: Array(10).fill(item),
      collapseBtnClass: 'el-icon-s-fold',
      isCollapse: false,
      sideWidth: 200,
      logoTextShow: true,
      headerBg: 'headerBg',
      people: {},
    }
  },
  created() {
    //从后台获取最新的people数据
    this.getUser()
  },
  methods: {
    collapse() { //点击收缩按钮触发
      this.isCollapse = !this.isCollapse
      if(this.isCollapse) { //收缩
        this.sideWidth = 64
        this.collapseBtnClass = 'el-icon-s-unfold'
        this.logoTextShow = false
      } else { //展开
        this.sideWidth = 200
        this.collapseBtnClass = 'el-icon-s-fold'
        this.logoTextShow = true
      }
    },
    rowStyle() {
      return "text-align:center";
    },
    getUser() {
      let peopleids = localStorage.getItem("people") ? JSON.parse(localStorage.getItem("people")).peopleids : ""
      if (peopleids) {
        //从后台获取最新的people数据
        request.get("/people/peopleids/" + peopleids).then(res => {
          //重新赋值后台最新的people数据
          this.people = res.data
        })
      }
    }
  }
}
</script>

<style>

</style>